<template>
	<view class="main">
		<view class="card_group">
			<view class="top_title">
				任务触发条件
			</view>
			<view class="card_box">
				<view class="job_type">
					<view class="job_title">
						任务类型
					</view>
					<view class="job_content" @click="popJobType">
						<view class="left_content black_type">
							{{JobType}}
						</view>
						<view class="right_content">
							<u-icon :name="arrow" size="31" color="#ccc"></u-icon>
						</view>
					</view>
				</view>

				<view class="job_type">
					<view class="job_title">
						任务时间
					</view>
					<view class="job_content" style="margin-bottom: 20rpx;" @click="Timing">
						<view class="left_content" v-if="!form.jobStartTime">
							请设置任务执行时间
						</view>
						<view class="left_content" style="color: #333;" v-if="form.jobStartTime">
							{{form.jobStartTime}}
						</view>
						<view class="right_content">
							<u-image :src="timeIcon" width="40rpx" height="40rpx"></u-image>
						</view>
					</view>
					<view class="zhouqi" v-if="JobType == '周期任务'">
						<view class="zhouqi_box">
							<view class="zhouqi_left" @click="subtract">
								<u-image :src="subtractIcon" width="40rpx" height="40rpx"></u-image>
							</view>
							<view class="zhouqi_center">
								<view class="" v-if="form.jobCycle == 0" @click="form.jobCycle ++">
									请设置任务执行间隔时间
								</view>
								<!-- <view style="color: #333;" v-if="form.jobCycle > 0"> -->
								<view v-if="form.jobCycle > 0">
									<u-input placeholder="请设置任务执行间隔时间" type="number"
										placeholder-style="fontSize:32rpx;color:#C1C1C1" v-model="form.jobCycle"
										:border="false" />
									<!-- {{form.jobCycle}} -->
								</view>

								<view class="">
									<span style="color: #333;">天</span>
								</view>
							</view>
							<view class="zhouqi_right" @click="add">
								<u-image :src="addIcon" width="40rpx" height="40rpx"></u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="24" bg-color="#fff"></u-gap>
		<view class="card_group">
			<view class="top_title">
				任务详情
			</view>
			<view class="card_box">
				<view class="job_type">
					<view class="job_title">
						任务名称
					</view>
					<view class="job_content" style="height:100rpx">
						<!-- 这里要重新写一方案，在周期计划的时候 -->
						<view class="left_content">
							<u-input placeholder="请输入任务名称" placeholder-style="fontSize:32rpx;color:#C1C1C1"
							 :disabled="true"	v-model="form.jobName" :border="false" />
						</view>

					</view>
				</view>

				<view class="job_type">
					<view class="job_title">
						任务内容
					</view>
					<view class="job_content" style="height: auto !important;">
						<view class="left_content">
							<view class="holder" v-if="form.jobContent&&form.jobContent.length == 0">
								请输入任务内容，如引用问卷模板，请按<span class="primary">#问卷名称#</span>格式进行输入任务内容
							</view>
							<u-input type="textarea" placeholder="" :maxlength="maxlength"
								placeholder-style="fontSize:32rpx;color:#C1C1C1" v-model="form.jobContent"
								:auto-height="true" :border="false"  :disabled="true" />
							<view class="count">
								{{form.jobContent&&form.jobContent.length}}/{{maxlength}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="sel_wenjuan">
			<view class="sel_box">
				<view class="juan_icon">
					<u-image :src="surveyIcon" width="32rpx" height="30rpx"></u-image>
				</view>
				<view class="juan_text" @click="Gotemplate">
					选择问卷
				</view>
			</view>
		</view> -->
		<view class="temp_list" v-if="tempTile">
			<view class="temp_content" @click="delTemp">
				<view class="temp_title">
					{{cultString(tempTile,8)}}
				</view>
				<view class="x_temp">
					<u-image :src="delIcon" width="40rpx" height="40rpx"></u-image>
				</view>
			</view>
		</view>

		<u-select v-model="showJobType" confirm-color="#4DC0D9" title="选择任务类型" :list="jobList" @confirm="Jobconfirm"
			:default-value="defaultValue"></u-select>

		<u-picker v-model="showTiming" mode="time" title="选择日期和时间" confirm-color="#4DC0D9" :params="TimeParams"
			@confirm="confirmTiming" @cancel="cancelTiming" :default-time="form.jobStartTime"></u-picker>

	<!-- 	<bottom-button text="保存" :inactive="inactive" @confirm="confirm"></bottom-button> -->
		<go-nav></go-nav>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeIcon: require('@/static/icon/time@2x.png'),
				surveyIcon: require('@/static/icon/survey@2x.png'),
				addIcon: require('@/static/icon/add@2x.png'),
				subtractIcon: require('@/static/icon/subtract@2x.png'),
				delIcon: require('@/static/icon/delete@2x.png'),
				arrow: 'arrow-down',
				textPlaceholder: '请输入任务内容，如引用问卷模板，请按#问卷名称#格式进行输入任务内容',
				maxlength: 300,
				// form: {  缓存到vuex里
				// 	jobContent: '', //任务内容
				// 	jobType: '1', //任务类型
				// 	jobName: '', //任务名称
				// 	jobStartTime: '', //任务时间
				// 	jobCycle: 0 //几天，周期
				// },
				//JobType: '定时任务', //任务类型所选值
				inactive: true,
				showJobType: false, //任务类型弹窗
				jobList: [{
						value: '1',
						label: '定时任务'
					},
					{
						value: '2',
						label: '周期任务'
					},
				],
				showTiming: false, //任务时间
				TimeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				edit: '',
				planId:''
			};
		},
		watch: {
			// form: {
			// 	handler(e) {
			// 		if (this.isPass('notoast')) {
			// 			this.inactive = false
			// 		} else {
			// 			this.inactive = true
			// 		}
			// 	},
			// 	deep: true
			// },
			tempTile: {
				handler(ne, ol) {
					if (!ne) {
						this.inactive = true
					} else if (this.isPass('notoast')) {
						this.inactive = false
					} else {
						this.inactive = true
					}
				},
				immediate: true
			}
		},
		computed: {
			defaultValue() {
				let val = this.$store.state.doc.JobType
				switch (val) {
					case "定时任务":
						return [0]
						break;
					case "周期任务":
						return [1]
					default:
						return [0]
				}
			},
			JobType: {
				get() {
					return this.$store.state.doc.JobType
				},
				set(val) {
					this.$store.commit('JOBTYPEShow', val)
				}
			},
			form: {
				get() {
					return this.$store.state.doc.JobRuleForm
				},
				set(val) {
					 this.$store.commit('JobFORM', val)
				}
			},
			tempTile() {
				if (this.$store.state.doc.suifangTemplate) {
					return this.$store.state.doc.suifangTemplate.title
				} else {
					return ''
				}
			},
			cultString(val, num) {
				return (val, num) => {
					let myString = val.toString()
					if (val.length > num) {
						return val.slice(0, num) + '...'
					} else {
						return val
					}
				}
			}
		},
		onShow() {
			//console.log(this.$store.state.doc.suifangTemplate,'suifangTemplate');
		},
		onLoad(obj) {
			if (obj.edit) {
				this.edit = obj
			}
		},
		methods: {
			popJobType(){
				//this.showJobType = true
			},
			subtract() { //减
				if (this.form.jobCycle > 0) {
					this.form.jobCycle--
				}
			},
			add() { //加
				this.form.jobCycle++
			},
			Jobconfirm(e) {
				this.form.jobType = e[0].value
				this.JobType = e[0].label
				//console.log(e);
			},
			Timing() { //任务时间弹窗
				//this.showTiming = true
			},
			confirmTiming(e) { //任务时间弹窗确认
				const now = new Date();
				// 获取年份  
				const year = now.getFullYear();
				// 获取月份，注意月份是从0开始的，所以需要+1  
				const month = String(now.getMonth() + 1).padStart(2, '0');
				// 获取日期  
				const day = String(now.getDate()).padStart(2, '0');
				// 获取小时  
				const hour = String(now.getHours()).padStart(2, '0');
				// 获取分钟  
				const minute = String(now.getMinutes()).padStart(2, '0');
				//选择时间不能小于当前时间
				if(year>e.year || month>e.month || day>e.day || hour>e.hour || minute>e.minute){
					this.$u.toast('选择时间不能小于当前时间')
					return
				}
				//console.log(e);
				this.form.jobStartTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			cancelTiming(e) { //任务时间弹窗取消

			},
			isPass(isToast = '') {
				if (!this.form.jobName) {
					if (isToast != 'notoast') this.$u.toast('请设置任务名称')
					return false
				}
				if (!this.form.jobStartTime) {
					if (isToast != 'notoast') this.$u.toast('请先设置任务开始时间')
					return false
				}
				if (!this.form.jobContent) {
					if (isToast != 'notoast') this.$u.toast('请输入任务内容')
					return false
				}
				// if (!this.tempTile) {
				// 	if (isToast != 'notoast') this.$u.toast('请选择问卷模板')
				// 	return false
				// }
				if (this.JobType == '周期任务') {
					if (!this.form.jobCycle) {
						if (isToast != 'notoast') this.$u.toast('请先设置任务执行间隔时间')
						return false
					}
				}
				return true
			},
			async confirm(val) { //保存按钮
				if (this.edit.edit == 1) {
					this.$store.dispatch('confirmEditJob', this.edit.jobName)
					uni.navigateBack({
						delta: 1
					})
					return
				}
				if (!this.isPass()) return
				let deepClone = JSON.parse(JSON.stringify({
					...this.form
				}))
				let saveForm = await this.$store.dispatch('addJobPushList', deepClone) //此处必须解构传值，不然是引用传值
				//console.log(saveForm,888);

				// if(!saveForm){
				// 	this.$u.toast('该任务规则已经添加，请勿重复添加',2500)
				// 	return
				// }

				uni.navigateBack({
					delta: 1
				})
				//console.log(val);
			},
			Gotemplate() {
				uni.navigateTo({
					url: '/pages/follow/wenjuantemplate'
				})
			},
			delTemp() {
				this.$store.commit('PICKTemplate', '')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f8f8f8;
		padding-bottom: 300rpx;
		// position: absolute;
		// width: 100%;
		min-height: 100vh;

		.card_group {
			.top_title {
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 33rpx;
				padding-left: 24rpx;
				padding-top: 40rpx;
				padding-bottom: 20rpx;
			}

			.card_box {
				background-color: #fff;

				.job_type {
					display: flex;
					flex-direction: column;

					.job_title {
						font-weight: bold;
						font-size: 32rpx;
						color: #212121;
						line-height: 38rpx;
						padding: 24rpx 0 12rpx 24rpx;
					}

					.job_content {
						margin: 0 24rpx 40rpx 24rpx;
						height: 100rpx;
						background: #F8F8F8;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.black_type {
							color: #333 !important;
						}

						.left_content {
							position: relative;
							width: 95%;
							font-weight: 500;
							font-size: 32rpx;
							color: #C1C1C1;
							line-height: 38rpx;
							padding-left: 24rpx;
						}

						.holder {
							position: absolute;
							top: 20rpx;
						}

						.count {
							display: flex;
							justify-content: flex-end;
							padding-bottom: 20rpx;
						}

						.right_content {
							padding-right: 28rpx;
						}

					}

					.zhouqi {
						padding: 0 24rpx;

						.zhouqi_box {
							background-color: #f8f8f8;
							border-radius: 20rpx;
							height: 100rpx;
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 32rpx;
							color: #C1C1C1;
							line-height: 38rpx;

							.zhouqi_left {
								padding-left: 24rpx;
							}

							.zhouqi_center {
								flex: 1;
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 0 24rpx;
							}

							.zhouqi_right {
								padding-right: 24rpx;
							}
						}
					}
				}

			}
		}

		.sel_wenjuan {
			display: flex;
			background-color: #fff;
			padding: 0 0 24rpx 24rpx;

			.sel_box {
				width: 200rpx;
				height: 72rpx;
				border-radius: 12rpx;
				border: 2rpx solid #4DC0D9;
				display: flex;
				align-items: center;

				.juan_icon {
					padding-left: 20rpx;
				}

				.juan_text {
					margin-left: 6rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #4DC0D9;
					line-height: 35rpx;
					text-align: center;
				}
			}

		}

		.temp_list {
			background-color: #fff;
			padding-left: 24rpx;
			padding-bottom: 24rpx;

			.temp_content {
				background-color: #f8f8f8;
				width: 350rpx;
				height: 64rpx;
				background: #F8F8F8;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.temp_title {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 1.5;
				}

				.x_temp {
					margin-left: 6rpx;
				}
			}
		}
	}

	::v-deep .uni-textarea-textarea {
		font-size: 32rpx;
		color: #333;
	}

	::v-deep .u-drawer-content-visible {
		box-sizing: border-box;
		border-radius: 20px;
	}

	::v-deep .u-select__header__title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #212121;
		line-height: 38rpx;
	}

	::v-deep .uni-scroll-view {
		border-radius: 20rpx 20rpx 0 0
	}

	::v-deep .u-picker__title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #212121;
		line-height: 38rpx;
	}

	::v-deep .u-input__input {
		font-size: 32rpx;
	}
</style>